<template>
    <div class="console-page">
        <div class="tree-container forbid-select">
            <div class="tree-body">
                <div style="width: 100%;height: 100%">
                    <el-scrollbar style="width: 100%; height: 100%">
                        <el-tree style="margin-bottom: 8px; position: relative" :data="editData" v-show="newItem"
                            node-key="sequence" ref="editTreeRef" @node-click="clickEditMenuInfo"
                            :highlight-current="true">
                            <template #default="{ data }">
                                <span class="c">
                                    <span :style="{ color: data.status === 1 ? '#606266' : '#c0c4cc' }"
                                        class="font-auto-resize itemText">
                                        <el-icon>
                                            <component :is="getIcon(data.icon)"></component>
                                        </el-icon>
                                        <div>{{ data.name }}</div>
                                    </span>
                                </span>
                            </template>
                        </el-tree>
                        <el-tree style="margin-bottom: 8px; position: relative" :data="data" v-show="!newItem"
                            node-key="sequence" @node-drag-start="handleStart" @node-drag-end="handleEnd" draggable
                            ref="treeRef" @node-click="click" :highlight-current="true" :allow-drop="allowDrop"
                            :allow-drag="allowDrag">
                            <template #default="{ data }">
                                <span class="c" @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)">
                                    <span :style="{ color: data.status === 1 ? '#606266' : '#c0c4cc' }"
                                        class="font-auto-resize itemText">
                                        <el-icon>
                                            <component :is="getIcon(data.icon)"></component>
                                        </el-icon>
                                        <div>{{ data.name }}</div>
                                    </span>
                                    <el-button class="delete" link @click.prevent.stop="del(data)"
                                        :icon="getIcon('minus')" v-show="showDel(data)" />
                                </span></template>
                        </el-tree>
                    </el-scrollbar>
                    <el-button :icon="getIcon('plus')" circle @click="addNewItem" rotate class="button-auto-resize"
                        style="position: absolute; bottom: 3px; left: 44%" />
                </div>
            </div>
            <div class="menu-info">
                <div style="width: 100%;">
                    <div v-if="showMenuInfo.sequence || newItem">
                        <div style="display: flex;padding: 5px;" class="input-auto-resize">
                            <div style="width: 80%;">
                                <div style="height: 100%;display: flex;align-items: center;">
                                    {{ newItem ? "新增节点信息" : "修改节点信息" }}
                                </div>
                            </div>
                            <div style="position: relative;width: 20%;">
                                <el-button circle :icon="getIcon('check')" @click="saveMenu"
                                    style="position: absolute;right: 9px;" class="button-auto-resize" />
                            </div>
                        </div>
                        <el-divider height="1" />
                        <div v-if="newItem" style="padding: 5px 0;">
                            <el-form :model="editMenuInfo" ref="editMenuInfoRef" class="e-page form-item forbid-select"
                                spellcheck="false" :rules="editRules" label-width="130px" @submit.native.prevent
                                :validate-on-rule-change="false">
                                <el-form-item label="父节点名称" prop="parent_name" key="parent_name">
                                    <div class="el-input el-input__wrapper" tabindex="-1">
                                        <div class="el-input__inner input_inner input-auto-resize">
                                            {{ editMenuParent }}
                                        </div>
                                    </div>
                                </el-form-item>
                                <el-form-item label="节点名称" prop="name" key="name">
                                    <el-input v-model="editMenuInfo.name" placeholder="节点名称" clearable
                                        class="input-auto-resize"></el-input>
                                </el-form-item>
                                <el-form-item label="URL" prop="url" key="url">
                                    <el-input v-model="editMenuInfo.url" placeholder="URL" clearable
                                        class="input-auto-resize"></el-input>
                                </el-form-item>
                                <el-form-item label="组件路径" prop="endpoint" key="endpoint"
                                    v-show="editMenuInfo.parent_name">
                                    <el-input v-model="editMenuInfo.endpoint" placeholder="Endpoint" clearable
                                        class="input-auto-resize"></el-input>
                                </el-form-item>
                                <el-form-item label="图标" prop="icon" key="icon">
                                    <c_iconPicker v-model="editMenuInfo.icon" />
                                    <!-- <icon-picker v-model="editMenuInfo.icon"
                                 class="el-input--small" ref="iconPicker"
                                 :options="{FontAwesome: false, ElementUI: true, addIconList: [], removeIconList: []}"/> -->
                                </el-form-item>
                                <div style="display: flex;">
                                    <div v-show="editMenuInfo.parent_name">
                                        <el-form-item label="页面缓存" prop="status" key="status">
                                            <el-switch v-model="editMenuInfo.keepAlive" active-text="是"
                                                inactive-text="否" :active-value="1" :inactive-value="0"
                                                class="status fit-auto-resize" inline-prompt
                                                :disabled="editMenuInfo.keepAliveDisabled">
                                            </el-switch>
                                        </el-form-item>
                                    </div>
                                    <div v-show="editMenuInfo.parent_name">
                                        <el-form-item label="TagMenu" prop="status" key="status">
                                            <el-switch v-model="editMenuInfo.onTag" active-text="是" inactive-text="否"
                                                :active-value="1" :inactive-value="0" @change="editMenuOnTagChange"
                                                class="status fit-auto-resize" inline-prompt>
                                            </el-switch>
                                        </el-form-item>
                                    </div>
                                    <div>
                                        <el-form-item label="菜单状态" prop="status" key="status">
                                            <el-switch v-model="editMenuInfo.status" active-text="显示" inactive-text="隐藏"
                                                :active-value="1" :inactive-value="2" class="status fit-auto-resize"
                                                inline-prompt>
                                            </el-switch>
                                        </el-form-item>
                                    </div>
                                </div>
                            </el-form>
                        </div>

                        <!-----------------------------------------------------------------------------------mdf------------------------------------------------------------------------------------------------------>
                        <div v-else style="padding: 5px 0;">
                            <el-form :model="showMenuInfo" ref="showMenuInfoRef" class="e-page form-item forbid-select"
                                spellcheck="false" :rules="showRules" label-width="130px" @submit.native.prevent
                                :validate-on-rule-change="false">
                                <el-form-item label="父节点名称" prop="parent_name" key="parent_name">
                                    <div class="el-input el-input__wrapper" tabindex="-1">
                                        <div class="el-input__inner input_inner input-auto-resize">
                                            {{ showMenuParent }}
                                        </div>
                                    </div>
                                </el-form-item>
                                <el-form-item label="节点名称" prop="name" key="name">
                                    <el-input v-model="showMenuInfo.name" placeholder="节点名称" clearable
                                        class="input-auto-resize"></el-input>
                                </el-form-item>
                                <el-form-item label="URL" prop="url" key="url">
                                    <el-input v-model="showMenuInfo.url" placeholder="URL" clearable
                                        class="input-auto-resize"></el-input>
                                </el-form-item>
                                <el-form-item label="组件路径" prop="endpoint" key="endpoint"
                                    v-show="showMenuInfo.parent_name">
                                    <el-input v-model="showMenuInfo.endpoint" placeholder="Endpoint" clearable
                                        class="input-auto-resize"></el-input>
                                </el-form-item>
                                <el-form-item label="图标" prop="icon" key="icon">
                                    <c_iconPicker v-model="showMenuInfo.icon" />
                                    <!-- <icon-picker v-model="showMenuInfo.icon"
                                 class="el-input--small" ref="iconPicker"
                                 :options="{FontAwesome: false, ElementUI: true, addIconList: [], removeIconList: []}"/> -->
                                </el-form-item>
                                <div style="display: flex;">
                                    <div v-show="showMenuInfo.parent_name">
                                        <el-form-item label="页面缓存" prop="status" key="status">
                                            <el-switch v-model="showMenuInfo.keepAlive" active-text="是"
                                                inactive-text="否" :active-value="1" :inactive-value="0"
                                                class="status fit-auto-resize" inline-prompt
                                                :disabled="showMenuInfo.keepAliveDisabled">
                                            </el-switch>
                                        </el-form-item>
                                    </div>
                                    <div v-show="showMenuInfo.parent_name">
                                        <el-form-item label="TagMenu" prop="status" key="status">
                                            <el-switch v-model="showMenuInfo.onTag" active-text="是" inactive-text="否"
                                                :active-value="1" :inactive-value="0" @change="showMenuOnTagChange"
                                                class="status fit-auto-resize" inline-prompt>
                                            </el-switch>
                                        </el-form-item>
                                    </div>
                                    <div>
                                        <el-form-item label="菜单状态" prop="status" key="status">
                                            <el-switch v-model="showMenuInfo.status" active-text="显示" inactive-text="隐藏"
                                                class="status fit-auto-resize" inline-prompt :active-value="1"
                                                :inactive-value="2">
                                            </el-switch>
                                        </el-form-item>
                                    </div>
                                </div>
                            </el-form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { deepCopy, emptyTriggerRule, getIcon } from "@/utils/tools"
import { ElMessageBox } from "element-plus"
import { useElMessage, useModalSize, useRequest, useElLoading } from "@usehook"

const bitLength = (_rule, value, callback) => {
    if (getBitLength(value) > 16) {
        callback(new Error("长度不能超过16字节"))
    } else {
        callback()
    }
}

let data = $ref([])

const defaultPermission = ["view"]

let editMenuInfo = $ref({
    sequence: "",
    name: "",
    url: "",
    icon: "",
    status: 1,
    parentId: "",
    flg: "",
    parent_name: "",
    endpoint: "",
    permission: defaultPermission,
    keepAlive: 1,
    onTag: 1,
    keepAliveDisabled: false
})

const editMenuOnTagChange = (onTag) => {
    editMenuInfo.keepAliveDisabled = !onTag
    if (!onTag) {
        editMenuInfo.keepAlive = 0
    }
}

let showMenuInfo = $ref({
    sequence: "",
    name: "",
    url: "",
    icon: "",
    status: "",
    parentId: "",
    flg: "",
    parent_name: "",
    endpoint: "",
    permission: defaultPermission,
    crt_time: "",
    keepAlive: 1,
    onTag: 1,
    keepAliveDisabled: false
})

const showMenuOnTagChange = (onTag) => {
    showMenuInfo.keepAliveDisabled = !onTag
    if (!onTag) {
        showMenuInfo.keepAlive = 0
    }
}

let oldData = $ref([])

let showRules = $ref({
    name: [
        { required: true, message: "名称不能为空", trigger: [] },
        { validator: bitLength, trigger: "" },
    ],
    url: [{ required: true, message: "地址不能为空", trigger: [] }, emptyTriggerRule],
    icon: [{ required: true, message: "图标不能为空", trigger: [] }, emptyTriggerRule],
})

let editRules = $ref({
    name: [
        { required: true, message: "名称不能为空", trigger: [] },
        { validator: bitLength, trigger: "" },
    ],
    url: [{ required: true, message: "地址不能为空", trigger: [] }, emptyTriggerRule],
    icon: [{ required: true, message: "图标不能为空", trigger: [] }, emptyTriggerRule],
})

let all_node = $ref([])

let newItem = $ref(false)

const showMenuParent = $computed(() => {
    return showMenuInfo.parent_name ? showMenuInfo.parent_name : "根节点"
})

const editMenuParent = $computed(() => {
    return editMenuInfo.parent_name ? editMenuInfo.parent_name : "根节点"
})

const editData = $computed(() => {
    return data.map((e) => {
        return {
            name: e.name === "首页" ? "根节点" : e.name,
            status: e.status,
            icon: e.icon,
            sequence: e.name === "首页" ? null : e.sequence,
        }
    })
})

const del = (_data) => {
    if (!useModalSize.get()) {
        useModalSize()
        ElMessageBox.confirm("确定删除节点「" + _data.name + "」?", "提示", {
            dangerouslyUseHTMLString: true,
            confirmButtonText: ' ',
            cancelButtonText: ' ',
            type: 'warning',
            customClass: "c-dialog forbid-select",
            closeOnClickModal: false,
            cancelButtonClass: "iconfont icon-close button-auto-resize",
            confirmButtonClass: 'iconfont icon-check button-auto-resize',
            roundButton: true,
            showClose: false,
            distinguishCancelAndClose: true
        }).then(() => {
            let dataBackUp = deepCopy(data);
            for (let i in data) {
                if (data[i].sequence === _data.sequence && data[i].name === _data.name) {
                    let delIndex = data.indexOf(data[i]);
                    data.splice(delIndex, 1);
                    break;
                } else {
                    for (let ii in data[i].children) {
                        if (data[i].children[ii].sequence === _data.sequence && data[i].children[ii].name === _data.name) {
                            let delIndex = data[i].children.indexOf(data[i].children[ii]);
                            data[i].children.splice(delIndex, 1);
                            break;
                        }
                    }
                }
            }
            //delete menu
            const loading = useElLoading({
                text: "正在删除目录",
                spinner: "loader",
            });
            useRequest({ url: "/menu/delMenu", data: _data, method: "post" }).then((resp) => {
                if (resp.status) {
                    if (_data.sequence === showMenuInfo.sequence) {
                        showMenuInfo.sequence = null
                    }
                    useElMessage("目录删除成功")
                } else {
                    if (resp.message) useElMessage.error(resp.message)
                    data = dataBackUp
                }
            }).catch((err) => {
                console.log(err);
            }).finally(() => {
                loading.close()
            })
        }).catch(() => { }).finally(() => {
            useModalSize(false)
        })
    }
}
const showDel = (data) => {
    return data.show && data.name !== "首页" && data.children.length === 0
}
const mouseenter = (data) => {
    data.show = true
}

const mouseleave = (data) => {
    data.show = false
}

const showMenuInfoRef = $ref(null)
const editMenuInfoRef = $ref(null)

const addNewItem = () => {
    if (newItem) {
        newItem = false;
        nextTick(() => {
            if (showMenuInfoRef) showMenuInfoRef.clearValidate();
        });
    } else {
        newItem = true;
        nextTick(() => {
            if (editMenuInfoRef) editMenuInfoRef.clearValidate();
        });
    }
}

const saveNode = () => {
    let check = checkExists();
    if (!check) {
        return false;
    }
    let nodeId = (newItem ? editMenuInfo : showMenuInfo)
        .sequence;
    for (let i in data) {
        if (data[i].sequence === nodeId) {
            for (let n in newItem ? editMenuInfo : showMenuInfo) {
                data[i][n] = (
                    newItem ? editMenuInfo : showMenuInfo
                )[n];
            }
            break;
        } else {
            for (let j in data[i].children) {
                if (data[i].children[j].sequence === nodeId) {
                    for (let n in newItem
                        ? editMenuInfo
                        : showMenuInfo) {
                        data[i].children[j][n] = (
                            newItem ? editMenuInfo : showMenuInfo
                        )[n];
                    }
                    break;
                }
            }
        }
    }
    return true;
}

const checkExists = () => {
    all_node = []
    let nameCount = 0
    let urlCount = 0
    for (let i in data) {
        if (editMenuInfo.name === data[i].name) {
            nameCount += 1
        } else if (editMenuInfo.url === data[i].url) {
            urlCount += 1
        }
        all_node.push(Number(data[i].sequence));
        if (data[i].children) {
            for (let j in data[i].children) {
                if (editMenuInfo.name === data[i].children[j].name) {
                    nameCount += 1;
                } else if (editMenuInfo.url === data[i].children[j].url) {
                    urlCount += 1;
                }
                all_node.push(Number(data[i].children[j].sequence));
            }
        }
    }

    if (editMenuInfo.flg === "add") {
        if (nameCount > 0) {
            useElMessage.error("节点名称已存在");
            return false;
        } else if (urlCount > 0) {
            useElMessage.error("URL已存在");
            return false;
        }
    } else if (editMenuInfo.flg === "modify") {
        if (nameCount > 1) {
            useElMessage.error("节点名称已存在");
            return false;
        } else if (urlCount > 1) {
            useElMessage.error("URL已存在");
            return false;
        }
    }
    return true;
}

const editTreeRef = $ref(null)
const saveMenu = async () => {
    await (newItem ? editMenuInfoRef : showMenuInfoRef).validate(
        async (valid) => {
            let submit = false;
            if (valid) {
                let dataBackUp = deepCopy(data);
                if (newItem) {
                    submit = addNode();
                } else {
                    submit = saveNode();
                }

                if (submit) {
                    const loading = useElLoading({
                        text: "正在提交数据,请稍后",
                        spinner: "loader",
                    });
                    try {
                        const resp = await useRequest({
                            url: "/menu/saveMenu",
                            data: newItem ? data : showMenuInfo,
                            batchCommit: newItem,
                            method: "post",
                        });
                        if (resp.status) {
                            if (newItem) {
                                editMenuInfo = {
                                    sequence: "",
                                    name: "",
                                    url: "",
                                    icon: "",
                                    status: 1,
                                    parentId: "",
                                    flg: "",
                                    parent_name: "",
                                    endpoint: "",
                                    permission: defaultPermission,
                                    keepAlive: 1,
                                    onTag: 1,
                                    keepAliveDisabled: false
                                };
                                editTreeRef.setCurrentKey();
                            }
                            //菜单树的展示框同步修改显示
                            // if (showMenuInfo.sequence === editMenuInfo.sequence) {
                            //   showMenuInfo.name = editMenuInfo.name;
                            //   showMenuInfo.endpoint = editMenuInfo.endpoint;
                            //   showMenuInfo.url = editMenuInfo.url;
                            //   showMenuInfo.icon = editMenuInfo.icon;
                            //   showMenuInfo.status = editMenuInfo.status;
                            // }
                            useElMessage.success(resp.message || "保存成功")
                        } else {
                            //回滚菜单数据
                            data = dataBackUp;
                            if (resp.message) useElMessage.error(resp.message);
                        }
                    } catch (e) {
                        data = dataBackUp;
                    } finally {
                        loading.close();
                    }
                }
            }
        }
    );
}

const addNode = () => {
    let check = checkExists();
    if (!check) {
        return false;
    }
    let max = all_node.sort((a, b) => {
        return b - a;
    })[0] || 0;

    if (editMenuInfo.parentId) {
        for (let i in data) {
            if (data[i].sequence === editMenuInfo.parentId) {
                data[i].children.push({
                    children: [],
                    endpoint: editMenuInfo.endpoint,
                    icon: editMenuInfo.icon,
                    name: editMenuInfo.name,
                    status: editMenuInfo.status,
                    url: editMenuInfo.url,
                    sequence: max + 1,
                    permission: editMenuInfo.permission,
                    keepAlive: editMenuInfo.keepAlive,
                    onTag: editMenuInfo.onTag,
                    keepAliveDisabled: !editMenuInfo.onTag
                });
            }
        }
    } else {
        data.push({
            children: [],
            endpoint: "",
            icon: editMenuInfo.icon,
            name: editMenuInfo.name,
            status: editMenuInfo.status,
            url: editMenuInfo.url,
            sequence: max + 1,
            permission: editMenuInfo.permission,
            keepAlive: editMenuInfo.keepAlive,
            onTag: editMenuInfo.onTag,
            keepAliveDisabled: !editMenuInfo.onTag
        });
    }
    return true;
}

const allowDrop = (draggingNode, dropNode, type) => {
    if (dropNode.name === "首页") {
        return false;
    } else if (Object.prototype.toString.call(dropNode.parent.data) === "[object Object]" && type === "inner") {
        return false;
    } else if (Object.prototype.toString.call(draggingNode.parent.data) === "[object Array]" && type === "inner") {
        return false;
    }
    return true;
}

const allowDrag = (draggingNode) => {
    return draggingNode.data.name !== "首页";
}

const handleEnd = () => {
    for (let i in data) {
        if (data[i].children) {
            for (let child in data[i].children) {
                if (data[i].children[child].children && data[i].children[child].children.length > 0) {
                    data = deepCopy(oldData)
                    useElMessage.warning("不允许嵌套二级以上目录")
                    return;
                }
            }
        }
    }
    const loading = useElLoading({
        text: "正在调整目录结构",
        spinner: "loader",
    })
    useRequest({
        url: "/menu/saveMenu",
        data: data,
        batchCommit: true,
        method: "post",
    }).then((resp) => {
        if (resp && resp.status) {
            useElMessage("目录结构调整成功");
        } else {
            useElMessage.error("目录结构调整失败");
            data = deepCopy(oldData);
        }
    }).catch((err) => {
        console.log(err);
        useElMessage.error("目录结构调整失败");
        data = deepCopy(oldData);
    }).finally(() => {
        loading.close();
    });
}

const handleStart = () => {
    oldData = deepCopy(data);
}

const clickEditMenuInfo = (obj) => {
    editMenuInfo.parentId = obj.sequence
    editMenuInfo.parent_name = obj.sequence !== null ? obj.name : null
    setTimeout(() => {
        editMenuInfoRef.clearValidate()
    })
}

const click = (obj, node) => {
    showMenuInfo.sequence = obj.sequence;
    showMenuInfo.name = obj.name;
    showMenuInfo.url = obj.url;
    showMenuInfo.icon = obj.icon;
    showMenuInfo.status = obj.status;
    showMenuInfo.parentId = node.level === 1 ? undefined : node.parent.data.sequence;
    showMenuInfo.parent_name = node.level === 1 ? undefined : node.parent.data.name;
    showMenuInfo.endpoint = obj.endpoint;
    showMenuInfo.permission = obj.permission instanceof Array ? obj.permission : obj.permission
        ? obj.permission.replace(/[\[\] ]/g, "").split(",") : defaultPermission;
    showMenuInfo.crt_time = obj.crt_time;
    showMenuInfo.rn = obj.rn;
    showMenuInfo.keepAlive = obj.keepAlive;
    showMenuInfo.onTag = obj.onTag
    showMenuInfo.keepAliveDisabled = !obj.onTag
}

const getTree = () => {
    useRequest({ url: "/menu/getMenuTree" }).then((resp) => {
        data = resp.data
    }).catch(() => { });
}

//获得输入框中字符长度
const getBitLength = (val) => {
    let str = String(val);
    let bytesCount = 0;
    for (let i = 0, n = str.length; i < n; i++) {
        let c = str.charCodeAt(i);
        if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) {
            bytesCount += 1;
        } else {
            bytesCount += 2;
        }
    }
    return bytesCount;
}

onMounted(() => {
    getTree()
})

watch(() => editMenuInfo.parent_name, (value) => {
    editRules.endpoint = [];
    if (value) {
        editRules.endpoint.push({
            required: true,
            message: "组件路径不能为空",
            trigger: [],
        })
    }
})

watch(() => showMenuInfo.parent_name, (value) => {
    showRules.endpoint = []
    if (value) {
        showRules.endpoint.push({
            required: true,
            message: "组件路径不能为空",
            trigger: [],
        })
    }
})
</script>

<style scoped lang="scss">
:deep(.el-dialog .el-dialog__body) {
    padding: 15px 5px 15px !important;
}

:deep(.el-dialog .el-dialog__header) {
    border-bottom: 1px solid #e4e7ec;
}

:deep(.el-dialog .el-dialog__footer) {
    padding: 5px 20px 10px;
    border-top: 1px solid #e4e7ec;
}

:deep(.el-dialog .el-dialog__body .el-form-item) {
    margin-bottom: 10px;
}

:deep(.el-dialog__body .el-form-item__content) {
    margin-bottom: 10px !important;
}

:deep(.el-form-item__content) {
    margin-right: 10px;
    margin-bottom: 0;
}

:deep(.el-scrollbar__wrap) {
    overflow-x: hidden;
    margin-bottom: 0 !important;
}

:deep(.el-tree-node__children .el-tree-node__content) {
    padding-left: 20px !important;
}

:deep(.el-tree) {
    background: transparent;
}

:deep(.el-input.is-disabled .el-input__inner) {
    color: #606266 !important;
    background-color: #f6f6f6 !important;
}

:deep(.el-switch.is-disabled .el-switch__core),
:deep(.el-switch.is-disabled .el-switch__label) {
    cursor: default !important;
}

:deep(.el-card__header) {
    padding: 10px 10px;
    height: 40px;
}

:deep(.el-card__body .el-form-item) {
    height: 35px;
}

:deep(.el-card__body) {
    height: 145px;
}

:deep(.e-tooltip) {
    margin-top: 5px;
}

:deep(.node-title) {
    text-align: right;
    margin-right: 25px;
    margin-top: 10px;
    cursor: default;
}

:deep(.permission.el-tag .el-icon-close) {
    right: 7px;
    top: 7px;
    position: absolute;
}

:deep(.permission) {
    position: relative;
    margin-top: 5px;
}

:deep(.permission.el-tag) {
    padding: 0 30px 0 10px;
}

:deep(.input-new-tag) {
    margin-top: 5px;
}

:deep(.el-dropdown-menu__item.is-disabled) {
    background-color: #ecf5ff !important;
    color: #66b1ff !important;
}

:deep(ul) {
    padding-inline-start: 0;
    margin-block-start: 0;
    margin-block-end: 0;
}

:deep(.el-form-item__error) {
    top: 26%;
    right: 20px;
    left: unset;
    padding-top: 0;
    font-size: var(--font-size);
}

:deep(.c .delete) {
    position: absolute;
    right: 0;
    width: 50px;
}

:deep(.c) {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding: 5px 8px 5px 0;
    height: 100%;
}

:deep(.el-tree-node__content) {
    /*margin-bottom: 6px !important;*/
    margin-left: 0 !important;
    padding: 0 !important;
    height: fit-content !important;
    cursor: default;
}

:deep(.itemText) {
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    line-height: calc(var(--font-size) + 7px);
    display: flex;
    align-items: center;
}

:deep(.el-scrollbar__wrap) {
    overflow-x: hidden;
}


:deep(.el-scrollbar__bar.is-vertical > div) {
    width: 0 !important;
}

:deep(.input_inner) {
    display: flex;
    align-items: center;
}

:deep(.el-form-item__label) {
    align-items: center;
    height: unset;
}

:deep(.tree-container) {
    display: flex;
    padding: 0 5px;
    height: calc(100% - 5px)
}

:deep(.tree-body) {
    position: relative;
    width: 350px;
    background: rgba(255, 255, 255, .5);
    border-radius: var(--border-radius);
}

:deep(.menu-info) {
    margin-left: 5px;
    width: calc(100% - 355px);
    border-radius: var(--border-radius);
    background: rgba(255, 255, 255, .5);
}

:deep(.el-divider) {
    padding-bottom: 10px;
}

:deep(.el-tree.el-tree--highlight-current) {
    margin-bottom: 0 !important;
}
</style>